import React, {useEffect} from 'react';
import {Text, View, StyleSheet, Button, Alert} from 'react-native';

export default function (props): React.JSX.Element {
  useEffect(() => {
    props.navigation.setOptions({
      //title: 'Updated!',
      headerRight: () => {
        return <Text style={{color: 'red', marginRight:10}} onPress={rightClick}>右边的文字</Text>;
      },
    });
  }, [props.navigation]);

  function rightClick() {
    Alert.alert('提示', '右边按钮被点击了', ['确定']);
  }

  const [callbackData, setCallbackData] = React.useState(null);
  function callback( data ){
    setCallbackData( JSON.stringify(data) );
  }

  return (
    <View style={styles.container}>
      <Text>Details Screen</Text>
      
      <View style={{marginTop: 20}}>
        <Text style={styles.text}>
          Callback Data: {callbackData}
        </Text>
      </View>

      <View style={{marginTop: 20}}>
        <Button
          title="Go to Test1"
          onPress={() =>
            props.navigation.navigate('Test1', {data: 'this is a param data', callback: callback})
          }
        />
      </View>
      <View style={{marginTop: 20}}>
        <Button
          title="Go to Test2"
          onPress={() =>
            props.navigation.navigate('Test2', {data: {a: 1, b: 2}})
          }
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {fontSize: 20, fontWeight: 'bold'},
});
